<template>
  <!-- 课程设计编辑页面 -->
  <div class="course-design-edit-container">
    <!-- 顶部操作栏 -->
    <a-card :bordered="false" class="top-action-bar">
      <a-row>
        <a-col :span="16">
          <a-space>
            <a-button type="primary" @click="saveCourseDesign" :loading="saving">
              <template #icon><save-outlined /></template>
              保存
            </a-button>
            <a-dropdown :trigger="['click']" placement="bottomLeft">
              <a-button>
                <template #icon><export-outlined /></template>
                导出
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="pdf" @click="exportAs('pdf')">
                    <file-pdf-outlined /> PDF教案
                  </a-menu-item>
                  <a-menu-item key="ppt" @click="exportAs('ppt')">
                    <file-ppt-outlined /> PPT课件
                  </a-menu-item>
                  <a-menu-item key="xml" @click="exportAs('kg')">
                    <GlobalOutlined/> 知识图谱
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <a-dropdown :trigger="['click']" placement="bottomLeft">
              <a-button>
                <template #icon><share-alt-outlined /></template>
                分享
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="link" @click="generateShareLink">
                    <link-outlined /> 生成分享链接
                  </a-menu-item>
                  <a-menu-item key="protect" @click="showProtectModal">
                    <lock-outlined /> 密码保护
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </a-col>
        <a-col :span="8" class="status-indicators">
          <a-space>
            <a-tooltip title="快捷键帮助">
              <a-button shape="circle" @click="showShortcutsModal">
                <template #icon><question-circle-outlined /></template>
              </a-button>
            </a-tooltip>
            <a-tooltip :title="saveStatus">
              <a-badge :status="saveStatus === '已保存' ? 'success' : 'processing'" />
              <span>{{ saveStatus }}</span>
            </a-tooltip>
            <a-tooltip :title="networkStatus">
              <a-badge :status="networkStatus === '在线' ? 'success' : 'warning'" />
              <span>{{ networkStatus }}</span>
            </a-tooltip>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <a-card title="编辑课程设计" :bordered="false" class="main-edit-card">
      <!-- 标题和课程信息 -->
      <div class="title-section">
        <a-input
          v-model:value="formState.title"
          placeholder="请输入课程标题"
          class="title-input"
          size="large"
        />
<!--        <a-select-->
<!--          v-model:value="formState.courseLevel"-->
<!--          style="width: 120px; margin-left: 16px"-->
<!--          size="large"-->
<!--          placeholder="适用年级"-->
<!--        >-->
<!--          <a-select-option value="初一">初一</a-select-option>-->
<!--          <a-select-option value="初二">初二</a-select-option>-->
<!--          <a-select-option value="初三">初三</a-select-option>-->
<!--          <a-select-option value="高一">高一</a-select-option>-->
<!--          <a-select-option value="高二">高二</a-select-option>-->
<!--          <a-select-option value="高三">高三</a-select-option>-->
<!--        </a-select>-->
      </div>

      <!-- MD编辑器区域 -->
      <div class="editor-section">
        <h3 class="section-title">课程大纲内容</h3>
        <a-tabs v-model:activeKey="activeTab">
          <a-tab-pane key="edit" tab="编辑">
            <MdEditor v-model="formState.content" :theme="theme" @onUploadImg="handleUploadImg" />
          </a-tab-pane>
          <a-tab-pane key="preview" tab="预览">
            <div class="markdown-preview" v-html="previewHtml"></div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 已上传资源和文件列表 -->
      <div class="resources-section">
        <h3 class="section-title">相关资源</h3>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card size="small" title="已上传文件">
              <template #extra>
                <a-button type="primary" size="small" @click="showUploadModal">
                  <upload-outlined /> 上传
                </a-button>
              </template>
              <a-list v-if="uploadedFiles.length > 0" size="small" :dataSource="uploadedFiles">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta :title="item.name">
                      <template #avatar>
                        <file-outlined v-if="item.type === 'docx'" style="color: #2b579a" />
                        <file-pdf-outlined v-else-if="item.type === 'pdf'" style="color: #e23d28" />
                        <file-excel-outlined
                          v-else-if="item.type === 'xlsx'"
                          style="color: #217346"
                        />
                        <file-unknown-outlined v-else />
                      </template>
                    </a-list-item-meta>
                    <template #actions>
                      <a-space>
                        <a-button type="link" size="small" @click="showFilePreview(item)"
                          >预览</a-button
                        >
                        <a-button type="link" size="small" @click="extractOutline(item)"
                          >提取大纲</a-button
                        >
                      </a-space>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
              <a-empty v-else description="暂无上传文件" />
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card size="small" title="课程封面">
              <div class="image-upload-container">
                <a-upload
                  v-model:file-list="fileList"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  :custom-request="handleUpload"
                  accept="image/jpeg,image/png"
                  :max-count="1"
                  class="image-uploader"
                >
                  <!-- 上传状态 -->
                  <div v-if="!previewImage" class="uploader-inner">
                    <plus-outlined />
                    <div class="upload-text">上传封面</div>
                    <div class="upload-hint">支持 JPG/PNG 格式</div>
                  </div>
                  <!-- 预览状态 -->
                  <div v-else class="small-preview">
                    <a-image
                      :src="previewImage"
                      :preview="false"
                      width="100px"
                      height="100px"
                      class="preview-thumbnail"
                    />
                  </div>
                </a-upload>

                <!-- 操作按钮 -->
                <div v-if="previewImage" class="image-actions">
                  <a-button type="link" @click="handlePreview" class="action-btn">
                    <eye-outlined /> 预览原图
                  </a-button>
                  <a-button type="link" @click="clearImage" danger class="action-btn">
                    <delete-outlined /> 移除
                  </a-button>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 底部操作按钮 -->
      <div class="action-buttons">
        <a-popconfirm
          title="确定要放弃编辑？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="handleCancel"
        >
          <a-button>取消</a-button>
        </a-popconfirm>
        <a-button @click="saveCourseDesign" :loading="saving">保存草稿</a-button>
        <a-button type="primary" @click="handlePublish" :loading="publishing">完成设计</a-button>
      </div>
    </a-card>

    <!-- 图片预览模态框 -->
    <a-modal :open="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img :src="previewImage" alt="课程封面" style="width: 100%" />
    </a-modal>

    <!-- 上传文件模态框 -->
    <a-modal v-model:open="uploadModalVisible" title="上传课程文件" @ok="handleUploadOk">
      <a-upload-dragger
        name="file"
        :multiple="true"
        action="/api/upload"
        @change="handleFileChange"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
        <p class="ant-upload-hint">支持单个或批量上传。支持 .docx, .pdf, .md 等格式文件。</p>
      </a-upload-dragger>

      <!-- 已上传文件列表 -->
      <a-divider v-if="uploadedFiles.length > 0">已上传文件</a-divider>
      <a-list v-if="uploadedFiles.length > 0" size="small" :dataSource="uploadedFiles">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :title="item.name">
              <template #avatar>
                <file-outlined v-if="item.type === 'docx'" style="color: #2b579a" />
                <file-pdf-outlined v-else-if="item.type === 'pdf'" style="color: #e23d28" />
                <file-excel-outlined v-else-if="item.type === 'xlsx'" style="color: #217346" />
                <file-unknown-outlined v-else />
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-button type="link" size="small" @click="showFilePreview(item)">预览</a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-modal>

    <!-- 文件预览模态框 -->
    <a-modal
      v-model:open="previewModalVisible"
      :title="previewFileName"
      width="80%"
      style="top: 20px"
      :footer="null"
    >
      <div class="file-preview-container">
        <!-- Word文档预览 -->
        <template v-if="previewFileType === 'docx'">
          <vue-office-docx :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- PDF预览 -->
        <template v-else-if="previewFileType === 'pdf'">
          <vue-office-pdf :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- Excel预览 -->
        <template v-else-if="previewFileType === 'xlsx'">
          <vue-office-excel :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- Markdown文件预览 -->
        <template v-else-if="previewFileType === 'md'">
          <div class="markdown-preview" v-html="markdownFilePreview"></div>
        </template>

        <!-- 其他文件类型 -->
        <template v-else>
          <div class="unsupported-file-type">
            <file-unknown-outlined style="font-size: 48px; color: #faad14" />
            <p>暂不支持该类型文件的预览，请下载后查看</p>
            <a-button type="primary" @click="downloadFile">下载文件</a-button>
          </div>
        </template>
      </div>
    </a-modal>

    <!-- 分享链接弹窗 -->
    <a-modal v-model:open="shareLinkModalVisible" title="分享课程设计" @ok="copyShareLink">
      <p>生成的分享链接（有效期1天）：</p>
      <a-input v-model:value="shareLink" readonly />
      <a-divider />
      <a-checkbox v-model:checked="passwordProtected">启用密码保护</a-checkbox>
      <a-input-password
        v-if="passwordProtected"
        v-model:value="sharePassword"
        placeholder="设置访问密码"
        style="margin-top: 10px"
      />
    </a-modal>

    <!-- 快捷键提示弹窗 -->
    <a-modal
      v-model:open="shortcutsModalVisible"
      title="快捷键帮助"
      @ok="shortcutsModalVisible = false"
    >
      <a-table :dataSource="shortcuts" :columns="shortcutColumns" :pagination="false" />
    </a-modal>
    <ToTop/>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import {
  DeleteOutlined,
  EyeOutlined,
  PlusOutlined,
  InboxOutlined,
  SaveOutlined,
  GlobalOutlined,
  ExportOutlined,
  ShareAltOutlined,
  QuestionCircleOutlined,
  LinkOutlined,
  LockOutlined,
  FilePdfOutlined,
  FilePptOutlined,
  FileOutlined,
  FileExcelOutlined,
  FileUnknownOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { marked } from 'marked'
import { useRoute, useRouter } from 'vue-router'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import html2pdf from 'html2pdf.js'
import { getGenerateTeachVo, updateGenerateTeach } from '@/api/generateTeachController'
import { Status } from '@/utils/enums/GenerateTeachEnum'
import ToTop from '@/components/ToTop.vue'
// 导入方式2：整体导入
import { BizType, generateShare } from '@/utils/share'
const route = useRoute()
const router = useRouter()

const formState = reactive<API.GenerateTeachVO>({
  title:'',
  content:'',

})


// 编辑器相关
const activeTab = ref<'edit' | 'preview'>('edit')
const theme = ref<'light' | 'dark'>('light')
const previewHtml = computed(() => {
  const result = marked(formState.content)
  if (typeof result === 'string') {
    return result
  } else {
    return ''
  }
})
const markdownFilePreview = ref('')

// 保存状态
const saveStatus = ref('已保存')
const networkStatus = ref('在线')
const saving = ref(false)
const publishing = ref(false)

// 图片上传相关
const fileList = ref<any[]>([])
const previewVisible = ref(false)
const previewImage = ref('')

// 文件预览相关
const previewModalVisible = ref(false)
const previewFileName = ref('')
const previewFileUrl = ref('')
const previewFileType = ref('')
const uploadedFiles = ref<any[]>([])

// 分享相关
const shareLinkModalVisible = ref(false)
const shareLink = ref('https://example.com/share/course/123456')
const passwordProtected = ref(false)
const sharePassword = ref('')

// 快捷键相关
const shortcutsModalVisible = ref(false)
const shortcuts = [
  { key: 'Ctrl+S', description: '保存方案' },
  { key: 'Alt+I', description: '插入资源' },
  { key: 'Ctrl+E', description: '导出PDF' },
  { key: 'Ctrl+D', description: '复制章节' },
  { key: 'F1', description: '显示帮助' },
]
const shortcutColumns = [
  { title: '快捷键', dataIndex: 'key', key: 'key' },
  { title: '功能描述', dataIndex: 'description', key: 'description' },
]

// 上传模态框
const uploadModalVisible = ref(false)
const showUploadModal = () => {
  uploadModalVisible.value = true
}
const handleUploadOk = () => {
  uploadModalVisible.value = false
}

// 清除图片
const clearImage = () => {
  previewImage.value = ''
  fileList.value = []
  // formState.coverImage = undefined
}

// 图片上传前检查
const beforeUpload = (file: File) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isImage) {
    message.error('只能上传 JPG/PNG 格式的图片!')
    return false
  }

  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    message.error('图片大小不能超过5MB!')
    return false
  }

  return true
}

// 处理图片上传
const handleUpload = async ({ file }: any) => {
  saving.value = true

  // 这里模拟上传，实际项目中应替换为真实API调用
  setTimeout(() => {
    previewImage.value = URL.createObjectURL(file)
    message.success('封面图片上传成功')
    saving.value = false
  }, 1000)
}

// 图片预览
const handlePreview = () => {
  previewVisible.value = true
}

// 文件上传处理
const handleFileChange = (info: any) => {
  const { status, name, originFileObj } = info.file

  if (status === 'done') {
    message.success(`${name} 文件上传成功`)

    // 保存上传的文件信息
    const fileExt = name.split('.').pop().toLowerCase()
    uploadedFiles.value.push({
      name,
      url: URL.createObjectURL(originFileObj),
      type: fileExt,
      originFile: originFileObj,
    })

    // 自动预览刚上传的文件
    showFilePreview(uploadedFiles.value[uploadedFiles.value.length - 1])
  } else if (status === 'error') {
    message.error(`${name} 文件上传失败`)
  }
}

// 显示文件预览
const showFilePreview = async (file: any) => {
  previewFileName.value = file.name
  previewFileUrl.value = file.url
  previewFileType.value = file.type

  // 如果是markdown文件，加载内容进行预览
  if (file.type === 'md') {
    try {
      const text = await file.originFile.text()
      markdownFilePreview.value = marked(text as string)
    } catch (error) {
      markdownFilePreview.value = '<p>无法读取文件内容</p>'
    }
  }

  previewModalVisible.value = true
}

// 下载文件
const downloadFile = () => {
  if (!previewFileUrl.value) return

  const link = document.createElement('a')
  link.href = previewFileUrl.value
  link.download = previewFileName.value
  link.click()

  message.success('文件下载中...')
}

// 从文档中提取大纲
const extractOutline = (file: any) => {
  message.loading(`正在从 ${file.name} 提取大纲...`)

  // 这里模拟AI提取大纲的过程，实际项目中应替换为真实API调用
  setTimeout(() => {
    if (file.type === 'md') {
      // 如果是Markdown文件，直接加载内容到编辑器
      file.originFile.text().then((text: string) => {
        formState.content = text
        message.success('Markdown内容已加载到编辑器！')
      })
    } else {
      // 其他格式文件，模拟提取
      message.success('大纲提取成功！')
    }
  }, 1500)
}

// 文中的图片上传逻辑
const handleUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
  const urls: string[] = []

  // 这里模拟上传，实际项目中应替换为真实API调用
  for (const file of files) {
    // 模拟上传
    await new Promise((resolve) => setTimeout(resolve, 800))
    urls.push(URL.createObjectURL(file))
  }

  callback(urls)
  saveStatus.value = '未保存'
}

// 保存课程设计
const saveCourseDesign = async () => {
  saving.value = true
  saveStatus.value = '保存中...'
  //更改的数据
  const id = route.params.id
  const editGenerateTeach = reactive<API.GenerateTeachUpdateDTO>({
    id:id,
    title:formState.title,
    content:formState.content,
    status:Status.Draft
  })
  try {
    const res = await updateGenerateTeach(editGenerateTeach)
    if (res.data.data && res.data.code === 0) {
      saving.value = false
      saveStatus.value = '已保存'
      message.success('课程设计保存成功！')
    } else {
      saveStatus.value = '未保存'
      message.error('课程设计保存失败！')
    }
  } catch (e) {
    saveStatus.value = '未保存'
    message.error('课程设计保存失败')
  }
}

// 发布课程设计
const handlePublish = async () => {
  publishing.value = true

  try {
    // 这里模拟发布，实际项目中应替换为真实API调用
    await new Promise((resolve) => setTimeout(resolve, 2000))
    message.success('课程设计发布成功！')
    router.push('/teacher/course_design')
  } catch (error) {
    message.error('发布失败')
  } finally {
    publishing.value = false
  }
}

// 取消编辑
const handleCancel = () => {
  router.push('/teacher/course_design')
}

// 导出功能
const exportAs = async (type: string) => {
  if (type === 'pdf') {
    message.loading(`正在导出${type.toUpperCase()}...`)
    try {
      // 将markdown转换为HTML
      let htmlContent = ''
      const result = marked(formState.content)

      // 处理marked的返回值，可能是string或Promise<string>
      if (typeof result === 'string') {
        htmlContent = result
      } else {
        // 假设是Promise类型
        htmlContent = await result
      }
      const container = document.createElement('div')
      container.innerHTML = `
        <div style="padding: 20px; font-family: 'Arial', sans-serif;">
          <h1 style="text-align: center; margin-bottom: 20px;">${formState.title || '课程设计'}</h1>
          <div class="content">${htmlContent}</div>
        </div>
      `
      // 使用html2pdf配置和导出
      const opt = {
        margin: 10,
        filename: `${formState.title || '课程设计'}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
      }

      await html2pdf().from(container).set(opt).save()
      message.success('PDF导出成功！')
    } catch (error) {
      console.error('导出失败', error)
      message.error('PDF导出失败，请重试')
    }
  }
  else if(type === "ppt"){
    //跳转到智能生成ppt页面
    await router.push("/teacher/generate_ppt")
  } else {
        // 其他格式的导出逻辑  知识图谱的生成
    await router.push("/teacher/generate_knowledgeGraph")

  }
}



// 分享链接相关
const generateShareLink = async () => {
  shareLinkModalVisible.value = true
  try {
    const link = await generateShare(passwordProtected.value, {
      bizType: BizType.GENTEACH,
      bizId: route.params.id
    })
    shareLink.value = link
    console.log('分享链接:', link)
  } catch (e) {
    message.error("生成分享链接失败")
  }
}

const showProtectModal = async () => {
  shareLinkModalVisible.value = true
  passwordProtected.value = true
  try {
    const link = await generateShare(passwordProtected.value, {
      bizType: BizType.GENTEACH,
      bizId: route.params.id
    })
    shareLink.value = link
    console.log('分享链接:', link)
  } catch (e) {
    message.error("生成分享链接失败")
  }
}

const copyShareLink = () => {
  // 复制链接到剪贴板
  navigator.clipboard
    .writeText(shareLink.value)
    .then(() => {
      message.success('链接已复制到剪贴板')
      shareLinkModalVisible.value = false
    })
    .catch(() => {
      message.error('复制失败，请手动复制')
    })
}

// 显示快捷键帮助
const showShortcutsModal = () => {
  shortcutsModalVisible.value = true
}

// 注册快捷键
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)

  // 检测网络状态
  window.addEventListener('online', () => {
    networkStatus.value = '在线'
    message.success('网络已连接')
  })
  window.addEventListener('offline', () => {
    networkStatus.value = '离线'
    message.warning('网络已断开，将启用离线模式')
  })

  // 加载课程数据
  fetchCourseDesign()
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyDown)
  window.removeEventListener('online', () => {})
  window.removeEventListener('offline', () => {})
})

const handleKeyDown = (e: KeyboardEvent) => {
  // Ctrl+S: 保存
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault()
    saveCourseDesign()
  }

  // 快捷键提示
  if (e.key === 'F1') {
    e.preventDefault()
    showShortcutsModal()
  }
}

// 加载课程设计数据
const fetchCourseDesign = async () => {
  const id = route.params.id
  if (!id){ return}
  try {
    const params = {
      id:id
    }
    const res = await getGenerateTeachVo(params)
    if(res.data.data && res.data.code === 0){
      formState.title = res.data.data.title
      formState.content = res.data.data.content
    }else{
      message.error('获取课程设计失败')
    }
  } catch (error) {
    message.error('获取课程设计失败')
  }
}
</script>

<style scoped>
.course-design-edit-container {
  padding: 15px;
}

.top-action-bar {
  margin-bottom: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.status-indicators {
  text-align: right;
}

.main-edit-card {
  margin-bottom: 24px;
}

.title-section {
  display: flex;
  margin-bottom: 24px;
}

.title-input {
  flex: 1;
}

.course-objectives {
  margin-bottom: 24px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
}

.editor-section {
  margin-bottom: 24px;
}

.markdown-preview {
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-height: 500px;
  background-color: #fff;
}

.resources-section {
  margin-bottom: 24px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.image-upload-container {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 上传容器样式 */
.image-uploader {
  width: 300px !important;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  background: #fafafa;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #40a9ff;
}

/* 小预览图样式 */
.small-preview {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  background: #fff;
}

.preview-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上传区域文字样式 */
.uploader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-text {
  margin-top: 8px;
  color: #595959;
  font-weight: 500;
}

.upload-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #8c8c8c;
}

/* 操作按钮样式 */
.image-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.action-btn {
  padding: 0;
  height: auto;
}

.file-preview-container {
  width: 100%;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.unsupported-file-type {
  text-align: center;
  padding: 40px 0;
}
</style>
